<template>
    <div style="height: 100%">
        <a-card title="财务简报" style="height: 100%">
          <a-row>
            <a-col :span="12" style="text-align: center;padding: 10px;">
              <p class="col-title">合同金额</p>
              <div class="col-content">
                <countTo prefix="¥" :startVal="0" :endVal="data.money" :durntion="3000"/>
              </div>
            </a-col>
            <a-col :span="12" style="text-align: center;padding: 10px;">
              <p class="col-title">新增合同</p>
              <div class="col-content">
                <countTo :startVal="0" :endVal="data.contractNum" :durntion="3000"/>
              </div>
            </a-col>
            <a-col :span="12" style="text-align: center;padding: 10px;">
              <p class="col-title">结算金额</p>
              <div class="col-content">
                <countTo prefix="¥" :startVal="0" :endVal="data.settlementAmount" :durntion="3000"/>
              </div>
            </a-col>
            <a-col :span="12" style="text-align: center;padding: 10px;">
              <p class="col-title">收款金额</p>
              <div class="col-content">
                <countTo prefix="¥" :startVal="0" :endVal="data.paymentAmount" :durntion="3000"/>
              </div>
            </a-col>
          </a-row>
        </a-card>
    </div>
</template>
<script>
  import { postAction } from '@/api/manage'
  import countTo from 'vue-count-to'
  export default {
    name: "FinancialNewsletter",
    components: {
      countTo
    },
    data() {
      return {
        indexStyle:1,
        data: {
          contractNum: 0,
          settlementAmount: 0,
          paymentAmount: 0
        },
        url: {
          getData: "/ghDepositPay/getFinancialNewsletter",
        }
      }
    },
    created() {

    },
    methods: {
      initData(params) {
        postAction(this.url.getData, params).then(res => {
          if (res.success) {
            this.data = res.result;
          }
        });
      }
    }
  }
</script>
<style>
 .col-title {
   font-size: 14px;
   color: rgba(0, 0, 0, 0.45);
   margin-bottom: 5px;
 }
 .col-content{
   font-size: 24px;
   color: rgba(0, 0, 0, 0.85);
 }
</style>